<template>
  <div class="scroll-view-demo">
    <div style="height: .8rem; background: red;"></div>
    <div style="height: calc(100% - .8rem)">
      <hong-scroll-view ref="hongScrollView"
                        refresh-text="要下拉刷新了"
                        refresh-active-text="释放就要刷新了"
                        refreshing-text="下拉刷新中..."
                        lower-loading-text="触底加载中..."
                        lower-finished-text="没有更多了~"
                        roller-color="red"
                        :page-size="20"
                        :immediate="false"
                        :data="list"
                        @load="getList">
        <div v-for="item of list"
             :key="item.index"
             style="padding-top: .24rem;"
             class="scroll-view-list">
          <div style="background: #ddd;"><p class="scroll-view-item">{{item.index}}</p></div>
        </div>
        <div slot="empty"
             class="empty-box">
          <div class="empty-box__icon">
            <i class="iconfont icon-empty-data"></i>
          </div>
          <div class="empty-box__text">
            <span>你好！</span>
          </div>
        </div>
      </hong-scroll-view>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'scroll-view-demo',
  components: {
  },
  data () {
    return {
      list: []
    }
  },
  created () {

  },
  methods: {
    getList ({ page, init }) {
      setTimeout(() => {
        if (init) {
          this.list = []
        }
        const result = this.getRandomResult(page.page)
        this.list = this.list.concat(result)
        if (this.list.length > 50) {
          this.$refs.hongScrollView.done(0)
        } else {
          this.$refs.hongScrollView.done(this.list.length)
        }
      }, 1000)
    },
    getRandomResult (page) {
      console.log(page)
      const count = page === 3 ? 13 : 20
      const list = []
      for (let i = 1; i < count + 1; i++) {
        list.push({
          index: ((page - 1) * 20) + i
        })
      }
      console.log(list)
      return list
    }
  }
}
</script>
<style lang="stylus" scoped>
.scroll-view-demo
  height 100%
  .scroll-view-item
    padding 30px 0
    text-align center
    font-size 28px
    font-family DINAlternate-Bold
    border-bottom 0.5px solid #efefef
  .empty-box
    padding-top 2.4rem
    text-align center
    color #999
    &__icon
      .iconfont
        font-size 1.5rem
    &__text
      margin-top 0.24rem
      font-size 0.28rem
</style>
